<template>
  <nav class="navbar"
       :class="[
            {'navbar-expand-lg': expand},
            {[`navbar-${effect}`]: effect},
            {'navbar-transparent': transparent},
            {[`bg-${type}`]: type},
            {'rounded': round}
         ]">
    <div class="container">
      <slot name="container-pre"></slot>
      <slot name="brand">
        <a class="navbar-brand" href="#" @click.prevent="onTitleClick">
          {{ title }}
        </a>
      </slot>
      <navbar-toggle-button :toggled="toggled"
                            :target="contentId"
                            @click.native.stop="toggled = !toggled">
      </navbar-toggle-button>

      <slot name="container-after"></slot>

      <div class="collapse navbar-collapse" :class="{show: toggled}" :id="contentId" v-click-outside="closeMenu">
        <div class="navbar-collapse-header">
          <slot name="content-header" :close-menu="closeMenu"></slot>
        </div>
        <slot :close-menu="closeMenu"></slot>
      </div>
    </div>
  </nav>
</template>
<script>
import {FadeTransition} from "vue2-transitions";
import NavbarToggleButton from "./NavbarToggleButton";

export default {
  name: "base-nav",
  components: {
    FadeTransition,
    NavbarToggleButton
  },
  props: {
    type: {
      type: String,
      default: "primary",
      description: "导航栏类型（例如默认、主要等）"
    },
    title: {
      type: String,
      default: "",
      description: "导航栏标题"
    },
    contentId: {
      type: [String, Number],
      default: Math.random().toString(),
      description:
        "菜单的显式ID。默认情况下是一个生成的随机数"
    },
    effect: {
      type: String,
      default: "dark",
      description: "导航栏效果（浅色|深色）"
    },
    round: {
      type: Boolean,
      default: false,
      description: "导航栏是否有圆角"
    },
    transparent: {
      type: Boolean,
      default: false,
      description: "导航栏是否透明"
    },
    expand: {
      type: Boolean,
      default: false,
      description: "导航栏是否包含 `navbar-expand-lg` 类"
    }
  },
  data() {
    return {
      toggled: false
    };
  },
  methods: {
    onTitleClick(evt) {
      this.$emit("title-click", evt);
    },
    closeMenu() {
      this.toggled = false;
    }
  }
};
</script>
<style>
</style>
